<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>添加数据源</title>
		<link type="text/css" rel="stylesheet" href="../static/css/layui.css" />
		<style>
			body {
				margin: 0;
				padding: 0;
				background-color: #f2f3f5;
			}

			.bg {
				padding: 30px;
				justify-content: center;
			}

			.title-font {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="layui-bg-gray bg">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md10 layui-col-md-offset1">
					<div class="layui-card">
						<div class="layui-card-header" style="background-color: #a0c5e8;color: white;">
							<div class="title-font">
								<h3>添加数据</h3>
							</div>
						</div>
						<div class="layui-card-body">
							<button onclick="setModel()" class="layui-btn layui-btn-primary">模板值</button>
							<form id="addForm" class="layui-form" action="" οnsubmit="return false;">
								<div class="layui-col-md12">
									<div class="layui-form-item">
										<label class="layui-form-label" style="white-space:nowrap">数据库名称：</label>
										<div class="layui-input-block">
											<input type="text" name="name" lay-verify="name" autocomplete="off"
												placeholder="请输入数据库名称" class="layui-input layui-col-md6">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label" style="white-space:nowrap">URL：</label>
										<div class="layui-input-block">
											<input type="text" name="url" lay-verify="dbUrl" autocomplete="off"
												placeholder="请输入URL 例：jdbc:mysql://localhost:3306" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label" style="white-space:nowrap">用户名称：</label>
										<div class="layui-input-block">
											<input type="text" name="username" lay-verify="username" autocomplete="off"
												placeholder="请输入用户名称" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label" style="white-space:nowrap">用户密码：</label>
										<div class="layui-input-block">
											<input type="password" name="password" lay-verify="password"
												autocomplete="off" placeholder="请输入用户密码" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label" style="white-space:nowrap">数据库类型：</label>
										<div class="layui-input-block">
											<select name="type" lay-filter="aihao">
												<option value="MySQL">MySQL</option>
												<option value="ORCALE">ORCALE</option>
											</select>
										</div>
									</div>
								</div>
							</form>
							<div class="layui-form-item">
								<div class="layui-input-block" style="text-align: center;">
									<button type="button" class="layui-btn" onclick="submit()"
										lay-filter="addForm">添加</button>
									<button type="button" class="layui-btn layui-btn-primary"
										onclick="reset()">重置</button>
									<button type="button" class="layui-btn layui-btn-normal"
										onclick="dbList()">数据源列表</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../static/js/layui.js"></script>
		<script>
			var layer, $, form;
			layui.use(['layer', 'form'], function() {
				form = layui.form;
				$ = layui.jquery;
				layer = layui.layer;
			});

			function myVerify(name) {
				let tep = "";
				switch (name) {
					case 'name':
						tep = "数据库名称不能为空";
						break;
					case 'url':
						tep = '数据库url不能为空';
						break;
					case 'username':
						tep = '用户名不能为空';
						break;
					case 'password':
						tep = '连接密码不能为空';
						break;
				}
				layer.msg(tep, {
					icon: 5
				});
			}

			// var form = $('#my-form'); // 获取表单元素
			// form[0].reset(); // 重置表单
			// 清空
			function reset(){
				$("input[name='name']").val("");
				$("input[name='url']").val("");
				$("input[name='username']").val("");
				$("input[name='password']").val("");
			}

			function submit() {
				let jsData = decodeURIComponent($("#addForm").serialize(), true);
				// 数据转对象
				let pArr = jsData.split("&");
				let requestData = {};
				for (var i = 0; i < pArr.length; i++) {
					let e = pArr[i];
					let con = e.split("=");
					if (con.length < 2 || con[1] == '') {
						myVerify(con[0]);
						return;
					}
					requestData[con[0]] = con.length > 1 ? con[1] : '';
				}
				// 提交
				$.ajax({
					url: "/add/datasource",
					async: true, //同步方式发送请求，true为异步发送
					type: "post",
					data: JSON.stringify(requestData),
					contentType: 'application/json;charset=utf-8',
					dataType: "JSON",
					success: function(result) {
						if (result.code == 200) {
							layer.msg("添加成功！", {
								icon: 1
							});
							window.location.href = "/get/source";
						} else {
							layer.msg("添加失败！");
						}
					},
				});
			}

			function dbList() {
				window.location.href = "/get/source";
			}

			function setModel() {
				$("input[name='name']").val("tool_script");
				$("input[name='url']").val("jdbc:mysql://localhost:3306");
				$("input[name='username']").val("root");
				$("input[name='password']").val("root");
			}
		</script>
	</body>
</html>
